<template>
  <div class="chart-title">
    <div class="left-container">
      <div class="title-content">{{ title }}</div>
    </div>
    <div
      class="right-container"
      @click="moreClick"
    >
      <span>更多</span>
      <i class="iconfont icon-jinrujiantou my-icon" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题名称',
    },
  },
  emits: ['click'],
  setup(props, context) {
    const moreClick = () => {
      context.emit('click')
    }
    return {
      moreClick,
    }
  },
}
</script>
<style lang="scss" scoped>
@import "@/style/basics.scss";
/* @import url(); 引入css类 */
.chart-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
  box-sizing: border-box;
  .left-container {
    .title-content {
      font-size: 18px;
      color: #333;
      font-weight: bold;
      padding-left: 10px;
      border-left: 4px $main-color solid;
    }
  }
  .right-container {
    font-size: 14px;
    color: #999;
    .my-icon {
      font-size: 12px;
      color: #999;
    }
    &:hover {
      cursor: pointer;
      color: $main-color;
      .my-icon {
        color: $main-color;
      }
    }
  }
}
</style>
